<template>
  <div class="seDept_box" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="medium" v-model="deptSearchWord"></el-input>
          <div class="dept_list">
            <el-tree ref="tree" :data="deptData" show-checkbox node-key="id" :props="defaultProps"
              @check-change="handleNodeClick" :default-checked-keys="checkedKeys" :filter-node-method="filterNode">
              <!-- :default-checked-keys="DeptIds" -->
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple emp-choose">
          <span style="line-height: 40px">已选择单位：</span>
          <el-button size="small" style="float: right;" @click="handleClear">清空</el-button>
          <el-card class="box-card" shadow="never">
            <div v-if="checkedDepts.length > 0">
              <el-row v-for="item in checkedDepts" :key="item.id" class="text item">
                <el-col :span="23"><span>{{ item.name }}</span></el-col>
                <el-col :span="1"><i class="el-icon-circle-close" @click="delCheckedDepts(item.id)"></i></el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Dept",
  props: {
    deptData: Array,
    deptChooseInfoOld: Array,
    value: String,
    // loading: Boolean,
  },
  data () {
    return {
      loading: false,
      deptSearchWord: "",
      // 配置选项 树渲染节点
      defaultProps: {
        // children: 'departments', //指定子树为节点对象的某个属性值
        label: 'name'  //指定节点标签为节点对象的某个属性值
      },
      // 已选择的部门
      checkedDepts: [],
      checkedKeys: []
    }
  },
  watch: {
    // 通过输入的关键字自动检索
    deptSearchWord (val) {
      this.$refs.tree.filter(val); //检索
      this.$emit('input', val);
    },
    value (val) {
      // this.deptSearchWord = val;
    },
    checkedDepts () {
      this.$emit("change-depts", this.checkedDepts);
    }
  },
  mounted () {
    this.recoverData();
  },
  methods: {
    filterNode (value, data, node) {
      if (!value) return true;
      let parentNode = node.parent,
        labels = [node.label],
        level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    handleNodeClick (data) {
      // debugger
      console.log("level")

      let checkedNodes = this.$refs.tree.getCheckedNodes();
      // console.log(checkedNodes)
      this.checkedDepts = checkedNodes.filter((item) => {
        // return item.departments;
        return item;
      })
      console.log(this.checkedDepts)
    },
    /**
     * 恢复上次没有点击确定之前的数据
     */
    recoverData () {

      this.loading = true;
      console.log("执行到了")
      console.log(this.deptChooseInfoOld)
      // this.$nextTick(function() {
      if (this.deptChooseInfoOld.length) {
        // 显示已选择数据的状态
        this.deptChooseInfoOld.forEach(node => {
          console.log(node.id)
          this.checkedKeys.push(node.id); // 将已选中节点的key值添加到checkedKeys数组中
        });
        this.checkedDepts = this.deptChooseInfoOld
        this.loading = false;
      } else {
        this.checkedDepts = [];
        this.loading = false;
      }
      // });
    },
    /**
     * 清空选择数据
     */
    handleClear () {
      this.$refs.tree.setCheckedKeys([]);
      this.checkedDepts = [];
      this.$emit("change-depts", []);
    },
    //删除
    delCheckedDepts (delVal) {
      this.checkedDepts = this.checkedDepts.filter(item => {
        return item.id != delVal;
      });
      this.$refs.tree.setCheckedNodes(this.checkedDepts);
      console.log('this.checkedDepts', this.checkedDepts)
    }
  }
}

</script>
<style lang="scss">
.seDept_box {
  .grid-content {
    text-align: left;

    .dept_list {
      position: relative;
      width: 100%;
      height: 470px;
      margin-top: 15px;
      border: 1px solid #dcdcdc;
      border-radius: 3px;
      background: #f8f8f8;
      overflow-y: scroll;
      padding: 5px 10px;
      box-sizing: border-box;
    }

    .box-card {
      height: 470px;
      margin: 10px 0px 20px 0px;

      .el-icon-circle-close {
        float: right;
        cursor: pointer;
      }

      .el-row {
        margin-bottom: 10px;
      }
    }
  }
}
</style>